<template>
	<div>
		<mu-card-media  >
          <img id="index-img2" :src="bg2" />
          		     
        </mu-card-media>
		<div id="user-info">
		  	<section class="img-sec" >
		  		<mu-card-media >
        			<img :src="headicon1" style="width: 100%;"/>
        		</mu-card-media>
        	</section> 
          <mu-flat-button :label="userInfo.C_USERALIAS" class="demo-flat-button" color="white" rippleColor="blue500"/>

        </div>
        
        <mu-list>
        	<mu-sub-header></mu-sub-header>
		     <mu-list-item title="个人中心"  class="list-line" @click="gotoAddress({path:'/studentPersonalInfo'})">
		       <mu-icon slot="left" value="account_circle" color="#f26166"/>
		       <mu-icon slot="right" value="keyboard_arrow_right"/>
		     </mu-list-item>  
		      <mu-list-item title="问题反馈" class="list-line" @click="gotoAddress({path:'/studentprobFeedback'})">
		         <mu-icon slot="left" value="feedback"  color="orange700"/>
		         <mu-icon slot="right" value="keyboard_arrow_right"/>
		      </mu-list-item> 
		      
		      	<mu-list-item :title="edition" class="list-line"  >
		         	<mu-icon slot="left" value="cached"  color="#99cef8"/>
		      	</mu-list-item> 
		      
		      
		      	<mu-list-item title="修改密码"  class="list-line" @click="gotoAddress({path:'/studentChangePassword'})">
		       		<mu-icon slot="left" value="lock_outline" color="#95d854"  />
		      	 	<mu-icon slot="right" value="keyboard_arrow_right"/>
		     	</mu-list-item>
			</mu-list>
		
		<!--<mu-list>
			<mu-list-item title="退出"  class="quit-btn" @click="loginOut()">
			       <mu-icon slot="left" value="power_settings_new" color="red"/>
			</mu-list-item>
		</mu-list>-->
		 
	</div>
</template>
<script>
import axios from 'axios'
export default {
	data () {
    return {
      open: false,
      docked: true,
      toast:false,
      edition:'当前版本：V1.2.0',
      message:'',
      userIdentity:'',
      isCommissary:false,
      version:localStorage.version,
      userInfo:{},
      bg2:'static/images/bg2.png',
      headicon1:'static/images/headicon1.jpg',
    }
  },
	computed:{
	},
	mounted(){
		 let that=this
		 that.axios.get('static/version/version.js?t='+new Date().getTime()).then(function(response){
	      	let version=response.data
	      	that.edition=`当前版本: ${version}`
		  }).catch(function(error){
		      	console.log(error)
	      })
		 that.imgComplete()
	      
	},
	methods: {
		gotoAddress(path){
	        this.$router.push(path)
		  },
		loginOut(){
			window.location.reload()
		},
	   imgComplete(){
	       	var objImg2=document.getElementById("index-img2")
	       	this.circleLoad(objImg2)
       },
       circleLoad(img){
   			var that=this
			var timer = setInterval(function() {
				if(img.complete) {
//					callback(img)
					that.getHeight()
					clearInterval(timer)
				}else{
				}
			}, 1)
       },
       getHeight(){
          	var objImg2=document.getElementById("index-img2")
	    	var iconCont2=document.getElementById("user-info")
	   		var objWidth2=document.body.offsetWidth;
	   		var narWidth2=objImg2.naturalWidth
	    	var narHeight2=objImg2.naturalHeight
	    	var objHeight2=(objWidth2*narHeight2)/narWidth2
	    	iconCont2.style.height=Math.ceil(objHeight2)+"px"
       }
      }
	}

</script>
<style>
 .example-apptab{
    position: fixed !important;
    right: 0;
    bottom: 0;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }
  #index-img2{
	display: block;
}
#user-info{
	position: absolute; 
	/*background-color:#51a2e7;*/ 
	color: white;
	z-index: 106; 
	width: 100%; 
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#icon-container section,#icon-container span{
	margin: 0.5rem 0;
}
.list-line{
	border-bottom: 1px solid #e4e4e4;
	/*height: 4rem;*/
	display: flex;
	align-items: center;
	background-color: white;
}  
.mu-item-wrapper{
	width:100% !important
}  
.quit-btn{
  	background-color: white;
  	/*height: 4rem;*/
  	display: flex;
	align-items: center;
}
 .img-sec{
	width: 5rem; 
	height: 5rem; 
	background-color: white; 
	border-radius: 50%; 
	overflow: hidden; 
	border:2px solid white
}
</style>